<template>
	<view class="payment">
		<!-- 二维码 -->
		<canvas class="f__canvas" style="width:300px;height:300px;" canvas-id="qrcode" id="qrcode"></canvas>
		<!-- <image src="../../static/computingPower/about.png" mode=""></image> -->
		<view class="money">
			<view class="mAddress">{{$t('sign.sign-payment.address')}}:</view>
			<view class="address"><text>{{moneyAddressTRC}}</text></view>
		</view>
		<!-- 内容详情 -->
		<ul>
			<li>请勿向上述地址充值任何非 ERC20 USDT 资产，
				否则资产将不可找回。
				。</li>
			<li>使用USDT-ERC20地址充值需要12个网络确认
				才能到账</li>
		</ul>
		<!-- 按钮 -->
		<view class="btns">
			<button @click="saveBaseImgFile">{{$t('sign.sign-payment.savaCode')}}</button>
			<button @click="copyTRC">{{$t('sign.sign-payment.copyAddress')}}</button>
		</view>


	</view>
</template>

<script>
	import _canvas from '@/uni_modules/fan-canvas/canvasUtils';
	import {
		saveImg,
		qrcodeCanvas
	} from '@/uni_modules/fan-canvas/plugins/utils'; // 需要保存图片和生成二维码可以引用此文件
	export default {
		data() {
			return {
				qrcodeImg: '', //二维码本地图片,
				moneyAddressTRC: 'TMR5Uw6xMLFQQqKsxH1aRjRyCBXkaeNGg6'
			};
		},
		methods: {
			// 创建二维码
			createQrcode() {
				var that = this
				qrcodeCanvas('qrcode', 'TMR5Uw6xMLFQQqKsxH1aRjRyCBXkaeNGg6', 400, 400);
				const ctx = uni.createCanvasContext('qrcode');
				ctx.draw(true, function() {
					uni.canvasToTempFilePath({
						width: 600,
						height: 600,
						canvasId: 'qrcode',
						success(res) {
							// 二维码本地图
							that.qrcodeImg = res.tempFilePath
							console.log(res, 'createQrcode')
						}
					}, that)
				})
			},
			// 保存
			saveBaseImgFile() {
				uni.saveImageToPhotosAlbum({
					filePath: this.qrcodeImg,
					success: function(res) {
						console.log('保存成功');
						uni.showToast({
							icon: 'none',
							title: '保存成功'
						})
					},
					fail() {
						uni.showToast({
							icon: 'none',
							title: '保存失败'
						})
					}
				});
			},
			copyTRC() {
				//提示模板
				uni.showModal({
					content: this.moneyAddressTRC, //模板中提示的内容
					confirmText: '复制钱包地址',
					success: res1 => { //点击复制内容的后调函数
						console.log(res1.confirm);
						//uni.setClipboardData方法就是讲内容复制到粘贴板
						// API `setClipboardData` is not yet implemented
						//意思是H5端没有这个接口！！！
						if (res1.confirm) {
							uni.setClipboardData({
								data: this.moneyAddressTRC, //要被复制的内容
								// showToast:false,
								success: function(res) {

								}
							});
						}
					},
					fail(res) {
						console.log(res);
					}
				});
			}
		},
		created() {
			console.log(222);
			var that = this
			setTimeout(function() {

				that.createQrcode()
			}, 0)
		}
	}
</script>

<style scoped>
	.payment {
		height: 94.6vh;
		background-color: #F3F3F3;
		position: relative;
	}

	image {
		width: 300rpx;
		height: 300rpx;
		position: absolute;
		left: 240rpx;
		top: 200rpx;
	}

	.money {
		padding-left: 80rpx;
	}

	.mAddress {
		font-size: 1.1em;
		color: #6A6A6A;
	}

	.address {
		width: 580rpx;
		font-weight: bold;
		font-size: 1.1em;
		word-wrap: break-word;
		word-break: break-all;
	}

	ul {
		color: #6A6A6A;
		font-size: .9em;
	}

	li {
		margin: 20rpx 0;
	}

	.btns {
		display: flex;
		justify-content: space-evenly;
		margin-top: 100rpx;
	}

	.btns>button {
		width: 280rpx;
		font-size: 1em;
		border: 1px solid #207DFE;
		box-shadow: 0px 10rpx 40rpx rgba(216, 216, 216, 0.17);
		background-color: #207DFE;
		color: #FFFFFF;
	}

	.f__canvas {
		margin: auto;
	}

	canvas {
		padding-top: 100rpx;
		width: 400rpx !important;
		height: 300rpx !important;
	}
</style>
